<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>发肤下载</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    header{
       height:80px;
        background:#2594D6 ;
        padding:12px 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    .mainPart{
        width:1170px;
        margin:0 auto;
    }
    .mainPart section:first-child{
        float: left;
    }
    .mainPart section:first-child p,.mainPart section:first-child img{
        float: left;
        margin-top:-4px;
    }
    .mainPart section:first-child p{
        margin-top: 10px;
        line-height:42px;
        font-size: 40px; ;
        padding-left:20px;
        margin-left: 20px;
        border-left:2px solid #FFFFFF;
    }
    .mainPart section:last-child p{
        font-size: 30px;
        line-height: 56px;
    }
    .mainPart section:last-child{
        float: right;
    }
    .mainPart p{
        color:#FFFFFF;
        font-family: SimHei;
        opacity: 0.5;

    }
    #mainPart{
        background-image:url(../fafu_download_pc/images/BACK.png)  ;
        overflow: hidden;
    }
    .slogan{
        margin-top: 125px;
        float: left;
    }
    .imgGroup{
        position: absolute;
        clear: both;
        float: right;
        top:454px;
    }
    .imgGroup>img{
        float: left;
    }
    .imgGroup section{
         float: left;
        margin-left: 40px;
    }
    .imgGroup section img{
        display: inline-block;
        float: left;
        height:78px;
    }
    .imgGroup section img:last-child{
       position: relative;
        top:115px;
        left:-306px;
    }
    .phone_img{
       position: relative;
        left:777px;
        top:-251px;
        z-index:200;
    }
    .footerBottom{
        position:fixed;
        height:80px;
        background-color:#000000;
        opacity: 0.5;
        z-index:0;
        bottom:0;
        left:0;
        width:100%;
    }
    footer{
        position:fixed;
        height:80px;
        font-size: 14px;
        bottom:0;
        left:0;
        color:#999;
        width:100%;
        text-align: center;
        z-index:100;
    }
    footer p{
        margin-top:20px;
        line-height:11px;
        color:#FFFFFF;
    }
</style>
<body>
<header>
    <section class="mainPart">
        <section><img src="../fafu_download_pc/images/logo.png"><p>移动应用</p></section>
        <section><p>怕秃顶 找好头发</p></section>
    </section>
</header>
<section id="mainPart">
    <section class="mainPart">
            <img src="../fafu_download_pc/images/slogan.png" class="slogan">
        <section class="imgGroup">
            <img src="../fafu_download_pc/images/code.png">
            <section>
                <img src="../fafu_download_pc/images/i_down.png" class="i_downLoad">
                <img src="../fafu_download_pc/images/a_down.png" class="a_downLoad">
            </section>
        </section>
        <img src="../fafu_download_pc/images/phone_img.png" class="phone_img">
    </section>
</section>
<section class="footerBottom"></section>
<footer><p>2016好头发www.haotoufa.com  中国互联网举报中心  京ICP备10043121号  京公网安备11010802020008号</p>
<p>网络文化经营许可证跟帖评论自律管理承诺书 违法和不良信息举报电话：400-850-5968 公司名称：北京好头发网络科技有限公司</p></footer>
<script src="../fafu_download_pc/jquery-1.11.1.js"></script>
<script>
    //设置整屏
    $(document).ready(function(){
        var ua = navigator.userAgent.toLowerCase();
        if (/iphone|ipad|ipod/.test(ua)) {
            location.href="downLoad.html";
        } else if (/android/.test(ua)) {
            location.href="downLoad.html";
        }
        var $height = $(window).height();
        console.log($height);
        var mainPart = $("#mainPart");
        mainPart.css("height",$height-80);
    });
    //下载动画与跳转
    $(document).ready(function(){
       var i_downLoad = $(".i_downLoad");
        var a_downLoad = $(".a_downLoad");
        i_downLoad.hover(function(){
            i_downLoad.attr("src","../fafu_download_pc/images/i_down_pre.png")
        },function(){
            i_downLoad.attr("src","../fafu_download_pc/images/i_down.png")
        })
        a_downLoad.hover(function(){
            a_downLoad.attr("src","../fafu_download_pc/images/a_down_press.png")
        },function(){
            a_downLoad.attr("src","../fafu_download_pc/images/a_down.png")
        })
        //预留下载地址
        i_downLoad.click(function(){
            location.href=sessionStorage.ios;
        })
        a_downLoad.click(function(){
            location.href=sessionStorage.android;
        })
    });
</script>
</body>
</html>